/**
 * Charts8:环形图
 */
import React from 'react'
import style from './index.less'
import moment from 'moment'
import {IECharts} from '../../../../components'

const Charts8 = ({
  name="环形图",
  data = [
    [{
      value:35,
      name:'指数1'
    }, {
      value:32,
      name:'other'
    }],
    [{
        value:75.32,
        name:'指数2'
    },
    {
        value:71,
        name:'other'
    }]
  ],
  color=['#2EC7C9', '#B6A2DE', '#5AB1EF', '#FFB980','#D87A80','#8D98B3'],
  height=320
}) => {

  const myProps = {
    option: {
        title: {
            text: name,
            subtext: 'HTSC SCORE',
            x: '30%',
            y: 'center',
            itemGap: 20,
            textStyle : {
                color : 'rgba(30,144,255,0.8)',
                fontFamily : '微软雅黑',
                fontSize : 35,
                fontWeight : 'bolder'
            }
        },
        color,
        tooltip : {
            show: true,
            formatter: "{b}:{c} ({d}%)"
        },
        legend: {
            orient : 'vertical',
            left:"60%",
            top:'middle',
            formatter: function (name) {
              const score =data.find(item=>item[0].name===name)[0].value
              return  `${name}：${score}`;
            },
            data:data.map((item,i)=>item[0].name)
        },
        grid: {
  	        left: '0',
  	        right: '0',
  	        bottom: '0',
  					top:'0',
  	        containLabel: true
  	    },
        series : data.map((item,i)=>{
          return {
              name:'1',
              type:'pie',
              clockWise:false,
              center: ['30%', '50%'],
              radius : [125-25*i+3, 150-25*i],
              itemStyle : {
                  normal: {
                      label: {show:false},
                      labelLine: {show:false}
                  }
              },
              data:[
                  item[0],
                  {
                      value:item[1].value,
                      itemStyle : {
                          normal : {
                              color: 'rgba(0,0,0,0.05)',
                              label: {show:false},
                              labelLine: {show:false}
                          },
                          emphasis : {
                              color: 'rgba(0,0,0,0.05)'
                          }
                      }
                  }
              ]
          }
        })
    }

	}
	return (
	  <div className={`chart ${style.chart}`} style={{
		  height
		}}>
		  <IECharts {...myProps} resizable={true}/>
		</div>
	)
	}

Charts8.propTypes = {
// data
}

export default Charts8
